<template>
	<div>
		<div class="mainList">
			<div class="list">
				<ul class="ul" @click="toDetail(item.id)" v-for="(item, index) in mainData" :key="index">
					<li>
						<div class="top">
							<h3>{{item.productName}}({{item.farmName}})</h3>
							<span class="address">{{item.originProvince}}</span>
							<span class="price">{{item.salesPrice}}<i>{{item.salePriceUnit}}</i></span>
						</div>
						<div class="center">
							<span class="qk">{{item.saleType}}</span>
							<span class="ps">{{item.shipmentCategory}}</span>
							<span class="by">{{item.postage}}</span>
						</div>
						<div class="bottom">
							<span class="bx">
								<img src="@/assets/img/home_img09.png" alt="" class="bao">
								<img src="@/assets/img/home_img10.png" alt="" class="bao2">
								{{item.insurance}}
							</span>
							<span class="jh">交货期：{{item.deliveryMonth}}个月</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="bg"></div>
		
	</div>
</template>

<script>
	
	export default {
		props: {
			mainData: Array
		},
		data(){
			return {
				
			}
		},
		methods: {
			// 跳转到详情页面
			toDetail(id){
				this.$router.push({
					path: '/home/detail/' + id
				})
			}
		}
	}
	
</script>

<style lang="scss" scoped>
@import "@/assets/css/homeCom.scss";
</style>
